<template>
    <div class="userInfo">

        <!-- 获取用户的头像 -->




        <div class="msg-content">
            <el-page-header @back="goBack" content="个人信息修改的">
            </el-page-header>



            <el-form :model="userInfo" status-icon label-position="left" ref="ruleForm" label-width="85px"
                class="demo-form-inline">

                <div class="picture">
                    <label class="label">
                        <input type="file" @change="uploadImg" />
                        <div class="img-box">
                            <img class="auto-img" :src="base" alt />
                        </div>

                        <div class="upload-icon">
                            <i class="el-icon-plus"></i>
                        </div>
                    </label>
                </div>


                <el-form-item label="昵称：" required>
                    <el-input v-model="userInfo.user_name" placeholder="请输入昵称"></el-input>
                </el-form-item>

                <el-form-item label="手机号：" required>
                    <el-input v-model="userInfo.user_phone" placeholder="请输入手机号"></el-input>
                </el-form-item>

                <el-form-item label="学校名字：">
                    <el-input v-model="userInfo.user_school" placeholder="请输入学校名字"></el-input>
                </el-form-item>
                <!-- 
                <el-form-item label="学校名字：">
                    <el-input v-model="userInfo.user_email" placeholder="请输入学校名字"></el-input>
                </el-form-item> -->
                <el-form-item label="性别" prop="user_sex">
                    <el-radio-group v-model="userInfo.user_sex">
                        <el-radio label="男"></el-radio>
                        <el-radio label="女"></el-radio>
                    </el-radio-group>
                </el-form-item>


                <el-form-item label="年龄：">
                    <el-input v-model="userInfo.user_age" placeholder="请输入年龄"></el-input>
                </el-form-item>

                <el-form-item label="地址：">
                    <el-input v-model="userInfo.user_address" placeholder="请输入地址"></el-input>
                </el-form-item>

                <div class="btn">
                    <el-button type="primary" class="register" @click="changeUserInfo">修改信息</el-button>

                </div>
            </el-form>

        </div>
    </div>
</template>
  
  
<script>

import { validForm } from '../untils/validForm'

import { getDetail, setDetail, profilePicture } from '../http/request'
export default {
    data() {
        return {

            // 用户头像
            base: "",
            userInfo: {
                // 优惠邮箱


                user_address: "",

                user_age: "",

                user_name: "",

                user_phone: "",

                user_sex: "",

                user_school: "",

                token: "",

                user_sex: ""


            },
            // 用户信息
            info: {}
        }
    },

    created() {
        // 
        // 获取用户的信息




        console.log('this.userInfo.token', this.userInfo.token);

        let info = localStorage.getItem('useInfo');

        this.info = JSON.parse(info);

        console.log('info', this.info);

        this.base = this.info.user_avatar;

        this.getUserInfo();

    },

    methods: {
        goBack() {
            this.$router.go(-1);
        },

        getUserInfo() {
            // 获取本地的token和用户信息
            // let userInfo = localStorage.getItem('useInfo');
            console.log('token11', this.info);


            let token = this.info.token;



            getDetail({ token }).then(res => {
                console.log('res', res);

                this.userInfo = res.data.result[0];

                // console.log('userInfo', this.userInfo);

                // let userInfo = localStorage.getItem('useInfo');

                // let token = JSON.parse(userInfo);

                // console.log('token', token);

                this.userInfo.token = this.info.token;






            }).catch(err => {
                console.log('err', err);
            })
        },

        // 提价修改的信息
        changeUserInfo() {
            let o = {
                user_phone: {
                    value: this.userInfo.user_phone,
                    errorMsg: '手机号格式不正确',
                    reg: /^1[3-9]\d{9}$/
                },
                user_name: {
                    value: this.userInfo.user_name,
                    errorMsg: '昵称由字母数字下划线汉字组合(1-10字符)',
                    reg: /^[\w\u4e00-\u9fa5]{1,10}$/
                },
                // code: {
                //     value: this.registerRuleForm.code,
                //     errorMsg: '验证码至少6个',
                //     reg: /^\d{6}$/
                // },
            };

            let isPass = validForm.valid(o);


            if (!isPass) {
                return
            }



            if (!this.userInfo.token) {
                this.$message({
                    message: '登录才可以才能修改',
                    type: 'error'
                });
                return
            }


            setDetail(this.userInfo).then(res => {
                console.log('res修改成功', res);

                if (res.data.code == 200) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });


                    // 修改本地的头像
                    this.info.user_name = this.userInfo.user_name;

                    // 存放到本地过来
                    localStorage.setItem('useInfo', JSON.stringify(this.info))
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'warning'
                    });
                }
            }).catch(err => {
                this.$message({
                    message: "修改失败",
                    type: 'warning'
                });
            })
        },


        // 修改用户的头像
        uploadImg(e) {
            //上传文件的信息
            console.log(6666, this.userInfo);


            let file = e.target.files[0]
            console.log('file', file);
            let formData = new FormData();
            formData.append("token", this.userInfo.token);
            formData.append('photo', file);
            // formData.append('article_tags', article_tags);
            // formData.append('article_navigate', article_navigate);
            // formData.append('article_content', article_content);
            // // formData.append('article_create_time', moment(new Date(article_create_time)).format('YYYY-MM-DD HH:mm:ss'))
            // formData.append('article_text', article_text);
            // formData.append('photo', file);
            // formData.append('article_title', article_title);
            // formData.append("fileType", "IMAGE");
            // // console.log("article_id:",article_id)

            profilePicture(formData).then(res => {

                console.log('res', res);

                if (res.data.code == 200) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    this.base = res.data.avatar;




                    // 修改本地的头像
                    this.info.user_avatar = avatar;

                    // 存放到本地过来
                    localStorage.setItem('useInfo', JSON.stringify(this.info))



                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'warning'
                    });
                }
            }).catch(err => {
                console.log('err', err);
            })
        },

    }


}
</script>
  
<style lang="scss">
.userInfo {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: #f7f7f7;

    .msg-content {
        position: absolute;
        left: 50%;
        top: 50%;

        transform: translate3d(-50%, -50%, 0);
        padding: 30px;
        width: 600px;
        height: 800px;
        background: white;
        box-shadow: 0 15px 30px rgb(0 0 0 / 10%);

        .picture {
            margin: 20px 0;

            .label {
                display: block;
                width: 80px;
                height: 80px;
                position: relative;

                [type='file'] {
                    display: none;
                }

                .img-box {
                    position: absolute;
                    width: 80px;
                    height: 80px;
                    top: 50%;
                    transform: translateY(-50%);
                    z-index: 5;
                    border: 1px dashed gray;

                    img {
                        width: 100%;
                        height: 100%;
                    }

                    img[src=''],
                    img:not([src]) {
                        opacity: 0;
                        border: none;
                        visibility: hidden;
                        max-width: none;
                    }
                }

                .upload-icon {
                    height: 50px;
                    line-height: 50px;
                    text-align: center;
                }
            }
        }

        .demo-form-inline {
            margin-top: 10px;
        }

        .btn {
            display: flex;
            justify-content: space-around;

            .register,
            .goBack {
                width: 100%;
                text-align: center;
            }


        }

        .code {
            margin-left: 10px;
        }


    }
}
</style>
  